<template>
  <div class="container">
    <div class="box">
      <div class="content">
        <div class="top">
          <el-input
            placeholder="请输入手机号"
            size="small"
            maxlength="11"
            class="search"
            v-model="tel"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button class="searchBtn" size="small" @click="find"
            >开始查询</el-button
          >
        </div>
        <div class="result">
          <!-- 精品留言 -->
          <div class="leave">
            <div class="title">精选留言</div>
            <template v-if="list.listJx&&list.listJx.length>0">

            <div class="item" v-for="(v, k) in list.listJx" :key="k">
              <span class="name" style="color: #0c73c2">{{ v.name }}</span> :
              <span class="content">{{ v.note }}</span>
            </div>
            </template>
            <el-empty v-else description="暂无精选留言"></el-empty>
          </div>
          <div class="list">
            <div class="title">中奖列表</div>
            <div>
              <div class="list">
                <div class="right">
                  <div class="listheader">
                    <div class="item">姓名</div>
                    <div class="item">电话</div>
                    <div class="item">奖品</div>
                  </div>
                  <template v-if="list.listZj && list.listZj.length > 0">
                    <div
                      class="list-item"
                      v-for="(v, k) in list.listZj"
                      :key="k"
                    >
                      <div>
                        {{ v.name }}
                      </div>
                      <div>{{ v.tel.replace(/(\d{3})\d{4}(\d{4})/g,'$1****$2') }}</div>
                      <div>{{ v.prizeName }}</div>
                    </div>
                  </template>
                  <el-empty v-else description="暂无中奖用户"></el-empty>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      form: {},
      rules: {},
      tel: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let { data } = await this.axios({
        url: "/api/main/PrizeResult",
        method: "post",
      });
      this.list = data.UserData;
    },
    find() {
      if (!this.tel || this.tel.length != 11) {
        return this.$message.error("请输入正确手机号");
      }
      this.$router.push("/search?tel=" + this.tel);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin-right: 120px !important;
  flex: 1;
  ::v-deep .el-input__inner {
    border-radius: 150px;
    border: 1px solid #231714;
  }
}
.searchBtn {
  border-radius: 150px;
  background: #5de3a2;
  color: #000;
  font-size: 78px;

  box-shadow: 0 30px 10px #01903e;
}
.container {
  font-size: 78px;
  .box {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border: 16px solid #231714;
    border-radius: 36px;
    position: relative;
    .content {
      padding: 2vh;
    }
  }
}
.top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  > div {
    width: 50%;
  }
}
.result {
  > div {
    margin: 140px 0;
    .title {
      margin: 40px 0;
      text-align: center;
      font-size: 106px;
      font-weight: 600;
      color: #ffffff;
      -webkit-text-stroke: 3px #231714;
      text-stroke: 3px #231714;
    }
    .item {
      padding-bottom: 40px;
      border-bottom: 1px solid #f7f7f7;
      &:last-child {
        border: none;
      }
    }
    .list-item {
      font-size: 56px;
      margin: 20px 0;
    }
    .list {
      display: flex;

      .left {
        width: 20vw;
      }
      .right {
        flex: 1;
        text-align: center;
        font-size: 78px;
        color: #231714;
        border-radius: 50px;
        border: 8px solid #231714;
        overflow: hidden;
        .listheader {
          display: flex;
          border-bottom: 8px solid #231714;
          > div {
            flex: 1;
            border-right: 8px solid #231714;
            padding: 0;
            background: #eefaf6;
            &:nth-child(3n) {
              border: none;
            }
          }
        }
        // border-radius: 150px;
        .list-item {
          display: flex;
          // flex-wrap: wrap;
          > div {
            &:nth-child(3n) {
              border: none;
            }
            width: 33%;
            border-right: 8px solid #231714;
            width: 100%;
            text-align: center;
            padding: 20px 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .idea {
      margin-top: 100px;
    }
  }
}
</style>
